<!-- Dom模板 -->
<template>
  <div class="box">
    <!-- Dom内容 -->
    <!-- search -->
    <div class="search">
      <p>角色名称：<input type="text" placeholder="请输入角色名称" /></p>
      <p>
        状态：
        <select>
          <option value="全部">全部</option>
          <option v-for="(item) in options" :key="item.value" :value="item.label">{{item.label}}</option>
        </select>
      </p>
      <p>
        <button class="searchBtn">搜索</button>
        <button class="resetBtn">重置</button>
      </p>
    </div>
    <!-- add -->
    <div class="add">
      <button>新增</button>
    </div>
    <!-- table -->
    <div class="table">
      <table>
        <thead>
          <tr>
            <td><input type="checkbox"></td>
            <td>序号</td>
            <td>角色名称</td>
            <td>所属组织</td>
            <td>创建人</td>
            <td>创建时间</td>
            <td>状态</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="item.id">
            <td><input type="checkbox"></td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.organization}}</td>
            <td>{{item.creator}}</td>
            <td>{{item.createTime}}</td>
            <td>{{item.state===0?'已停用':'已开启'}}</td>
            <td>
              <span>查看详情</span>
              <span>修改</span>
              <span>停用</span>
              <span>修改</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加弹框 -->
    <addAlert v-if="showAddAlert"></addAlert>
  </div>
</template>

<script>
// 添加弹框
import addAlert from "./addRole"
export default {
  name: "",
  data() {
    return {
        options: [{
          value: '选项1',
          label: '使用中'
        }, {
          value: '选项2',
          label: '已停用'
        }],
        value: '',
        data:[],
        showAddAlert:false,//控制是否显示添加弹框
    };
  },
  components: {
    addAlert,//添加弹框
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.data = this.$store.state.roleAdministrator.data
  },
  // Vue方法定义
  methods: {},
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.box {
  width: calc(100% - 240px);
  height: calc(100% - 60px);
  border: 1px solid black;
  padding: 20px;
  background:#E8E8E8;
}
/* search */
.box .search{
  width:100%;
  display:flex;
  height:40px;
  align-items: center;
}
.box .search p{
  margin-right:30px;
}
.box .search p input{
  height:35px;
  outline: none;
}
.box .search p select{
  height:35px;
  width:100px;
  outline: none;
}
.box .search p button{
  margin-right:5px;
  border:none;
  outline: none;
  width:100px;
  height: 35px;
  border-radius: 5px;
  color:#fff;
}
.box .search p button.searchBtn{
  background:#3894FF;
}
.box .search p button.resetBtn{
  background:#E29836;
}
/* add */
.box .add{
  height:100px;
  display:flex;
  align-items: center;
}
.box .add button{
  background:#3894FF;
  width:100px;
  height: 35px;
  color:#fff;
  border-radius: 5px;
  border:none;
  outline: none;
}
/* table */
.box .table{
  width:80%;
  background:#fff;
}
.box .table table{
  border-collapse:collapse;
  border:none;
}
.box .table table{
  width:100%;
}
tr{
  width:100%;
  height:40px;
}
td{
  text-align: center;
}
.box .table table thead{
  width:100%;
  background:#EBECEC;
}
.box .table table tbody tr td:last-child span{
  color:rgba(2, 94, 231, 100);
  padding-right:10px;
}

</style>